<template>
<div id="add-role">
    <header class="add-role-header">
        <h3 class="add-role-title">添加角色</h3>
    </header>
    <form class="add-role-from" ref="roleForm">
        <my-input
            :title="'角色名称'"
            :name="'rolename'"
            v-model="rolename"
        ></my-input>
        <my-input
            :title="'角色描述'"
            :name="'roledesc'"
            v-model="roledesc"
        ></my-input>
    </form>
    <footer class="add-role-footer">
        <my-button
            :type="'reset'"
            class="reset"
            @click.native="handleClickResetRoleForm"
        >重置</my-button>
        <my-button
            :type="'add'"
            class="add"
            :disabled="!(this.rolename && this.roledesc)"
            @click.native="handleClickAddRole"
        >添加</my-button>
    </footer>
</div>
</template>

<script>
import { addRole } from '../../config/data'
export default {
    name: "addRole",
    data() {
        return {
            rolename: "",
            roledesc: ""
        }
    },
    methods: {
        handleClickResetRoleForm() {
            this.rolename = ""
            this.roledesc = ""
        },
        async handleClickAddRole() {
            let result = await addRole({
                rolename: this.rolename,
                roledesc: this.roledesc
            })
            if(result.fsBool) {
                this.$router.push({name: "roleList"})
            }
        }
    }
}
</script>

<style scoped>
#add-role {
    height: 100%;
}
.add-role-header {
    height: 50px;
    line-height: 50px;
    font-size: 20px;
}
.add-role-from {
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: calc(100% - 100px);
}
.add-role-from::-webkit-scrollbar {
    display: none;
}
.add-role-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    line-height: 50px;
}
.add-role-footer .reset,
.add-role-footer .add {
    margin: 0 12px;
}
</style>